<template>
  <div class="record">
    <div class="commons_top">
      <div class="commons_back" @click="$router.go(-1)">
        <img src="@/assets/index/back.png" />
      </div>
      <span class="commons_title">历史记录</span>
      <span class="commons_cancel" @click="batchDel">清空</span>
    </div>
    <div v-infinite-scroll="loadMore" infinite-scroll-disabled="loading" infinite-scroll-distance="10">
      <div v-if="recordList && recordList.length> 0">
        <div class="record_list" :class="item.isTouchMove ? 'touch-move-active' : ''" v-for="(item,index) in recordList" :key="index">
          <van-swipe-cell>
            <div class="record_wrap">
              <img :src="coverUrl(item.cover)" @error="errImg('book')" class="record_cover" @click="linkDet('bookDet',item.goodsId)">
              <div class="record_con">
                <div class="record_name" @click="linkDet('bookDet',item.goodsId)">{{item.name}}</div>
                <div class="record_time">{{item.uploadTime.substring(0,16)}}</div>
              </div>
            </div>
            <template #right>
              <van-button square text="删除" type="danger" class="delete-button" @click="del(item.id)" />
            </template>
          </van-swipe-cell>
        </div>
        <p v-if="loading" class="page-infinite-loading">
          <span>
            <mt-spinner type="fading-circle"></mt-spinner>
            加载中...
          </span> 
        </p>
        <p v-else class="loadOver">
          <span v-if="!isNull && isLast">—— 我是有底线的 ——</span>
        </p>
      </div>
    </div>
    <div class="special_no" v-if="recordList && recordList.length == 0 && !loading">
      <img class="no_con" src="@/assets/common/no_content.png">
      <div class="no_text">暂无浏览历史记录</div>
    </div>
  </div>
</template>

<script>
import '@static/css/common.css'
import { Toast } from 'mint-ui'
import { getBrowseAPI, deleteAPI, batchDelAPI } from '@/api/shelf'

export default {
  data() {
    return {
      recordList: [],
      loading: false,
      isNull: '',
      isLast: '',
      listQuery: {
        resourceType: 1,
        pageNum: 1,
        pageSize: 10
      },
      totalPage: null
    }
  },
  mounted() {
    this.getRecord()
  },
  methods: {
    getRecord() { //列表
      let that = this
      this.loading = true
      getBrowseAPI(this.listQuery).then(res => {
        if(res.data.code === 0) {
          let list = []
          if(this.listQuery.pageNum == 1) {
            list = res.data.data.list
          } else {
            list = this.recordList.concat(res.data.data.list)
          }
          if(list){
            list.forEach((res, idx) => {
              list[idx].isTouchMove = false
            })
          }
          this.recordList = list
          this.totalPage = res.data.data.pages
          this.isNull = list && list.length > 0 ? false : true
          this.isLast = res.data.data.pages == this.listQuery.pageNum ? true : false
        } else {
          Toast(res.data.msg)
        }
        this.loading = false
      })
    },
    loadMore() {
      if(this.totalPage > this.listQuery.pageNum) {
        this.listQuery.pageNum = this.listQuery.pageNum + 1
        this.getRecord()
      }
    },
    del(id) { //单条删除
      let that = this
      let ids = []
      ids.push(id)
      this.$confirm('确认要删除当前记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(() => {
        deleteAPI(ids).then(res => {
          if(res.data.code===0){
            Toast('已删除浏览记录')
            that.getRecord()
          }else{
            Toast(res.data.msg)
          }
        })
      })
    },
    batchDel() { //清空全部
      let that = this
      this.$confirm('确认要清空所有记录吗？', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        center: true
      }).then(() => {
        batchDelAPI().then(res => {
          if(res.data.code===0){
            Toast('已删除浏览记录')
            that.$router.go(-1)
          }else{
            Toast(res.data.msg)
          }
        })
      })
    },
    // 跳转详情页
    linkDet(name,id) {
      this.navigationFuc(name, { id });
    }
  },
}
</script>

<style>
  .mint-spinner-fading-circle{
    margin: 0 auto;
    margin-bottom: 10px;
  }
  .page-infinite-loading{
    text-align: center;
    padding: 10px;
    color: #999999;
    font-size: 14px;
  }
  .loadOver{
    height: 0.8rem;
    text-align: center;
    line-height: 0.8rem;
    color: #999999;
    font-size: 14px;
  }
  .el-message-box {
    width: 250px !important;
  }
  .record_list .delete-button {
    height: 100% !important;
  }
</style>
<style scoped>
  .record {
    width: 100%;
    height: 100vh;
    background: #FFFFFF;
  }
  .commons_cancel {
    margin: auto 0 auto 30%;
    font-size: 16px;
    color: #666666;
  }
  .record_main {
    width: 100%;
  }
  .record_list {
    border-bottom: 0.02rem solid #eeeeee;
  }
  .record_wrap {
    padding: 0.2rem 0.3rem;
    box-sizing: border-box;
    display: flex;
  }
  .record_cover {
    width: 0.86rem;
    height: 1.15rem;
  }
  .record_con {
    flex: 1;
    margin-left: 0.2rem;
    padding-top: 0.1rem;
    box-sizing: border-box;
  }
  .record_name {
    color: #5E5F71;
    font-size: 15px;
    font-weight: bold;
    overflow: hidden;
    display: inline-block;
    white-space: nowrap;
    text-overflow:ellipsis;
    width: 5.8rem;
  }
  .record_time {
    color: #B2B1C3;
    font-size: 12px;
    font-weight: 400;
    margin-top: 0.26rem;
  }
</style>